<template>
	<view class="container">
		<view class="reg-form-box">
			<view class="form-item-box">
				<view class="form-item-label">省市</view>
				<view class="form-item-input-picker">
					<picker mode="multiSelector" @change="regionConfirm" @columnchange="regionChange" :range="regionList" range-key="regionName">			
						<view class="uni-input">
							{{regionList[0][regionIndex[0]].regionName}}{{regionList[1][regionIndex[1]].regionName}}
						</view>
					</picker>
				</view>
				<view class="form-item-arrow">
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">高中</view>
				<view class="form-item-input-picker">
					<picker @change="highSchoolChange" :range="highSchoolList" :value="highSchoolIndex" range-key="highSchoolName">
						<view class="uni-input">{{highSchoolList[highSchoolIndex].highSchoolName}}</view>
					</picker>
				</view>
				<view class="form-item-arrow">
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">班级</view>
				<view class="form-item-input-picker">
					<picker @change="highSchoolClassChange" :range="highSchoolClassList" :value="highSchoolClassIndex" range-key="highSchoolClassName">
						<view class="uni-input">{{highSchoolClassList[highSchoolClassIndex].highSchoolClassName}}</view>
					</picker>
				</view>
				<view class="form-item-arrow">
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">文理科</view>
				<view class="form-item-input-picker">
					<picker @change="subjectChange" :range="subjectList" :value="subjectIndex">
						<view class="uni-input">{{subjectList[subjectIndex]}}</view>
					</picker>
				</view>
				<view class="form-item-arrow">
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">姓名</view>
				<view class="form-item-input">
					<input v-model="formData.name" placeholder="填写真实姓名" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">身份证号</view>
				<view class="form-item-input">
					<input v-model="formData.idcard" placeholder="填写真实身份证号" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">手机号</view>
				<view class="form-item-input">
					<input v-model="formData.phone" placeholder="填写真实手机号" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">验证码</view>
				<view class="form-item-input-mini">
					<input v-model="formData.code" placeholder="填写短信验证码" placeholder-class="placeholder-input" />
				</view>
				<view class="form-item-btn" @tap="sendCode">{{sendCodeText}}</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">登录密码</view>
				<view class="form-item-input">
					<input v-model="formData.password" :password="true" placeholder="请填写登录密码" placeholder-class="placeholder-input" />
				</view>
			</view>
			<view class="form-item-box">
				<view class="form-item-label">确认密码</view>
				<view class="form-item-input">
					<input v-model="formData.confirmPassword" :password="true" placeholder="请再次填写登录密码" placeholder-class="placeholder-input" />
				</view>
			</view>
		</view>
		<view class="submit-btn-box">
			<view class="submit-btn" @tap="doSubmit">确认提交</view>
		</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				t: 0,
				subjectIndex: 0,
				subjectList: ['文科', '理科'],
				regionList: [[], []],
				regionIndex: [0, 0],
				highSchoolList: [
					{highSchoolId: 0, highSchoolName: '请选择高中'}
				],
				highSchoolIndex: 0,
				highSchoolClassList: [
					{highSchoolClassId: 0, highSchoolClassName: '请选择班级'}
				],
				highSchoolClassIndex: 0,
				formData: {
					highSchoolId: 0,
					highSchoolClassId: 0,
					subject: 1,
					name: '',
					phone: '',
					code: '',
					type: '1',
					idcard: '',
					password: '',
					confirmPassword: ''
				},
				seconds: 60,
				sendCodeText: '获取验证码',
				enableSendCode: true,
				mobileReg: /^1[3456789]\d{9}$/,
				idcardReg: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			}
		},
		
		onLoad() {
			this.fetchRegionData()
		},
		
		methods: {
			
			subjectChange(e) {
				let subject = parseInt(e.target.value)
				this.subjectIndex = subject
				this.formData.subject = subject + 1
			},
			
			regionChange(e) {
				if (e.detail.column == 0) {
					this.regionList[1] = this.regionList[0][e.detail.value].regionChildren
					this.$forceUpdate()
				}
			},
			
			regionConfirm(e) {
				const that = this
				that.regionIndex = e.detail.value
				let cityId = that.regionList[1][that.regionIndex[1]].regionId
				let params = {
					cityId: cityId
				}
				http('/no-login/highschool', params, {hideLoading: true}).then(res => {
					if (res.code == 20000) {
						let data = res.data
						
						that.highSchoolList = []
						that.highSchoolIndex = 0
						that.highSchoolList.push({highSchoolId: 0, highSchoolName: '请选择高中'})
						
						that.highSchoolClassList = []
						that.highSchoolClassIndex = 0
						that.highSchoolClassList.push({highSchoolClassId: 0, highSchoolClassName: '请选择班级'})
						
						for (let i = 0; i < data.length; i++) {
							that.highSchoolList.push(data[i])
						}
					}
				})
			},
			
			highSchoolChange(e) {
				const that = this
				that.highSchoolIndex = e.target.value
				let id = that.highSchoolList[that.highSchoolIndex].highSchoolId
				that.formData.highSchoolId = id
				let params = {
					highSchoolId: id
				}
				http('/no-login/highschoolclass', params, {hideLoading: true}).then(res => {
					if (res.code == 20000) {
						let data = res.data
						
						that.highSchoolClassList = []
						that.highSchoolClassIndex = 0
						that.highSchoolClassList.push({highSchoolClassId: 0, highSchoolClassName: '请选择班级'})
						
						for (let i = 0; i < data.length; i++) {
							that.highSchoolClassList.push(data[i])
						}
					}
				})
			},
			
			highSchoolClassChange(e) {
				let id = e.target.value
				this.highSchoolClassIndex = id
				this.formData.highSchoolClassId = id
			},
			
			fetchRegionData() {
				const that = this
				http('/no-login/region', {}, {hideLoading: true}).then(res => {
					if (res.code == 20000) {
						let data = res.data
						for (let i = 0; i < data.length; i++) {
							that.regionList[0].push(data[i])
						}
						let childData = data[0].regionChildren
						for (let i = 0; i < childData.length; i++) {
							that.regionList[1].push(childData[i])
						}
					}
				})
			},
			
			countdown() {
				if (this.seconds > 0) {
					setTimeout(this.countdown, 1000)
					this.sendCodeText = `等待${this.seconds}s`
					this.seconds--
				} else {
					this.enableSendCode = true
					this.sendCodeText = '获取验证码'
					this.seconds = 60
				}
			},
			
			sendCode() {
				const that = this
				
				if (that.formData.phone.length <= 0) {
					return showToastMsg('请输入手机号')
				}
				if (!that.mobileReg.test(that.formData.phone)) {
					return showToastMsg('请输入正确的手机号')
				}
				
				if (!that.enableSendCode) {
					return false
				}
				that.enableSendCode = false
				
				let params = {
					phone: that.formData.phone
				}
				http('/no-login/sendcode', params, {loadingTitle: '验证码发送中'}).then(res => {
					that.countdown()
					if (res.code == 20000) {
						return showToastMsg('验证码发送成功')
					}
				})
			},
			
			doSubmit() {
				const that = this
				if (that.formData.highSchoolId <= 0) {
					return showToastMsg('请选择高中')
				}
				if (that.formData.highSchoolClassId <= 0) {
					return showToastMsg('请选择班级')
				}
				if (that.formData.subject <= 0) {
					return showToastMsg('请选择文理科')
				}
				if (that.formData.name.length <= 0) {
					return showToastMsg('请输入姓名')
				}
				if (that.formData.idcard.length <= 0) {
					return showToastMsg('请输入身份证号')
				}
				if (!that.idcardReg.test(that.formData.idcard)) {
					return showToastMsg('请输入正确的身份证号')
				}
				if (that.formData.phone.length <= 0) {
					return showToastMsg('请输入手机号')
				}
				if (that.formData.code.length <= 0) {
					return showToastMsg('请输入验证码')
				}
				if (that.formData.password.length <= 0) {
					return showToastMsg('请输入登录密码')
				}
				if (that.formData.confirmPassword.length <= 0) {
					return showToastMsg('请再次输入登录密码')
				}
				if (that.formData.password != that.formData.confirmPassword) {
					return showToastMsg('两次密码输入不一致')
				}
				http('/no-login/register', that.formData, {loadingTitle: '正在提交'}).then(res => {
					if (res.code == 20000) {
						showToastMsg('提交成功')
						uni.redirectTo({
							url: '/pages/login/login?t=3'
						})
					}
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	
	.uni-input {
		font-size: 30rpx;
		color: #333333;
	}
	
	.reg-form-box {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 120rpx;
		z-index: 1;
	}
	
	.form-item-box {
		width: 680rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}
	
	.form-item-input {
		width: 500rpx;
	}
	
	.form-item-input-mini {
		width: 290rpx;
	}
	
	.form-item-input-picker {
		width: 420rpx;
	}
	
	.form-item-input input {
		font-size: 30rpx;
		color: #333333;
	}
	
	.placeholder-input {
		font-size: 30rpx;
		color: #dcdada;
	}
	
	.form-item-label {
		width: 130rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.form-item-btn {
		width: 160rpx;
		height: 56rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#000000, #000000);
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.submit-btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 102rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
	
	.submit-btn {
		width: 702rpx;
		height: 78rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#4482f8, #4482f8);
		border-radius: 39rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #ffffff;
	}
	
	.form-item-arrow image {
		width: 24rpx;
		height: 24rpx;
	}
</style>
